import React from "react"
import { View } from "@tarojs/components"
import clsx from "clsx"
import { Arrow } from "@taroify/icons"
import styles from "./index.module.scss"

type IProps = {
  children?: React.ReactNode
  className?: string
  title: React.ReactNode
  titleClassName?: string
  titleRowClassName?: string
  /** @default true */
  showArrow?: boolean
  /** @default null */
  extraText?: React.ReactNode
  contentClassName?: string
  /** @default #999999 */
  arrowColor?: string
  /** @default 14 */
  arrowSize?: number | string
  extraClassName?: string
  onArrowClick?: () => void
}
const GpBlock: React.FC<IProps> = function (props: IProps) {
  const { showArrow = true, extraText = null, arrowColor = "#999999", arrowSize = 14 } = props
  return (
    <View className={clsx(styles.wrapper, props.className)}>
      <View className={clsx(styles.blockTitleRow, props.titleRowClassName)}>
        <View className={clsx(styles.blockTitle, props.titleClassName)}>{props.title}</View>
        <View className={clsx(styles.extra, props.extraClassName)} onClick={props.onArrowClick}>
          {extraText && (
            <View
              style={{
                color: arrowColor
              }}
            >
              {extraText}
            </View>
          )}
          {showArrow && <Arrow color={arrowColor} size={arrowSize} />}
        </View>
      </View>
      <View className={clsx(styles.content, props.contentClassName)}>{props.children}</View>
    </View>
  )
}
export default GpBlock
